<template>
  <view class="banner" v-if="list.isShow.val">
    <view class="banner-container">
      <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" indicator-active-color="#FFF">
        <swiper-item v-for="(item, idx) in list.swiperConfig.list" :key="idx">
          <image :src="item.img"></image>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500
      }
    }
  }
</script>

<style lang="scss" scoped>
  .swiper {
    height: 375rpx;

    image {
      width: 100%;
      height: 375rpx;
    }
  }
</style>
